<template>
    <div>
        <el-row>
            <component :is="content"></component>
            <el-col :span="20">
                <h2>个人信息查看与修改</h2>
                <el-form ref="form"  label-width="80px" class="user-form">
                    <el-form-item label="用户名" >
                        <el-input v-model="userName" :rules="rules"></el-input>
                    </el-form-item>
                        <el-form-item label="性别">
                            <el-radio v-model="radio" label="1">男</el-radio>
                            <el-radio v-model="radio" label="2">女</el-radio>
                        </el-form-item>
                        <el-form-item label="出生日期">
                            <el-date-picker
                                    v-model="birthDate"
                                    type="date"
                                    placeholder="选择日期"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="timestamp">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="职务">
                            <el-select v-model="role" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.role"
                                        :label="item.label"
                                        :value="item.role">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="学历">
                            <el-select v-model="education" placeholder="请选择">
                                <el-option
                                        v-for="item in options1"
                                        :key="item.education"
                                        :label="item.label"
                                        :value="item.education">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="userPhoneNum" :rules="rules"></el-input>
                        </el-form-item>
                        <el-form-item label="部门">
                            <el-select v-model="dept" placeholder="请选择">
                                <el-option
                                        v-for="item in options2"
                                        :key="item.dept"
                                        :label="item.label"
                                        :value="item.dept">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="头像">
                            <el-upload
                                    class="avatar-uploader"
                                    action="apf/upload"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="changeUserInfo">修改</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import NavMenu from "../components/NavMenu";
    export default {
        name: "userInfoChange",
        data(){
            return{
                userName:'',
                content:NavMenu,
                radio:'1',
                birthDate:'',
                role:'',
                education:'',
                userPhoneNum:'',
                dept:'',
                imageUrl:'',
                headerImg:'',
            }
        },
        mounted() {
            this.init()
        },
        methods:{
            init(){
                this.$axios.get("api/userInfoList",).then(
                    r=>{
                        this.userName=r.data.userName
                        this.radio=r.data.radio
                        this.birthDate=r.data.birthDate
                        this.role=r.data.role
                        this.education=r.data.education
                        this.userPhoneNum=r.data.userPhoneNum
                        this.dept =r.data.dept
                    }
                )

            },
            changeUserInfo(){
                let fd = new FormData
                fd.append("role", this.role)
                fd.append("userPhoneNum", this.userPhoneNum)
                fd.append("dept", this.dept)
                this.$axios.post("api/changeUserInfo",fd).then(
                    r=>{
                        if (r.data == 200) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '修改失败',
                                type: 'error'
                            });
                        }

                    }
                    )


            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.headerImg=res
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 5;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!');
                }
                return isJPG && isLt2M;
            }

        }    }
</script>

<style scoped>
    .user-form {
        width: 350px;
        margin: 50px auto; /* 上下间距160px，左右自动居中*/
        background-color: rgb(255, 255, 255); /* 透明背景色 */
        padding: 30px;
        border-radius: 20px; /* 圆角 */
    }
</style>